@mixin theme($background, $object, $array, $key, $string, $number, $boolean, $null) {
  background-color: $background;

  .json-bracket[type="object"] {
    color: $object;
  }

  .json-bracket[type="array"] {
    color: $array;
  }

  .json-key {
    color: $key;
    cursor: pointer;
  }

  .json-string,
  .json-string a {
    color: $string;
  }

  .json-bigint,
  .json-number {
    color: $number;
  }

  .json-boolean {
    color: $boolean;
  }

  .json-null {
    color: $null;
  }
}

ul,
li {
  list-style-type: none;
}

wrapper {
  display: contents;
}

.hidden {
  display: none !important;
}

.json-viewer ul {
  border-left: 0.5px dotted #ccc;

  li {
    padding-left: 20px;
  }
}

.json-bracket {
  font-weight: 700;
}

.json-copy {
  width: 13px;
  height: 13px;
  cursor: pointer;
  margin-left: 0.15em;
  display: inline-block;
  background-size: 13px;
  vertical-align: text-bottom;
  background-repeat: no-repeat;
  transition: background-image ease 300ms;
  background-image: url();

  &.success {
    background-image: url();
  }
}

.json-arrow {
  width: 0;
  opacity: 0.2;
  display: inline-block;

  &:hover {
    opacity: 0.35;
  }

  &::before {
    width: 0;
    height: 0;
    left: -13px;
    content: "";
    cursor: pointer;
    position: relative;
    border-style: solid;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(90deg);
    border-width: 5px 0 5px 8px;
    transition: transform 0.3s ease;
    border-color: transparent transparent transparent currentColor;
  }
}

.collapsed .json-arrow::before {
  transform: rotate(0deg);
}

.json-desc {
  display: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #9aa160;
  user-select: none;
  margin-left: 0.3em;

  span {
    margin: 0 0.5em;
    font-weight: normal;

    &:hover {
      text-decoration: underline;
    }
  }
}

.json-color {
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.3em;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #ccc;
}

.json-comma {
  margin-left: 0.15em;
  font-family: "Courier New", monospace;
}

.json-colon {
  margin: 0 0.3em 0 0.15em;
}

/** 默认主题色 START **/
.default-theme {
  @include theme(#fefefe, #6d9331, #8e9331, #910f93, #2e7c16, #164ff1, #c41a16, #228fec);
}
/** 默认主题色 END **/

/** 浅色主题 START **/
.light-theme {
  @include theme(#fefefe, #6d9331, #8e9331, #0040cf, #a31515, #0b7500, #0000ff, #0055ff);
}

/** 浅色主题 END **/
/** 暗黑主题色 START **/
.dark-theme {
  @include theme(#252526, #9bba43, #c4af00, #9cdcfe, #ce9178, #b5cea8, #358cd6, #569cd6);
}
/** 暗黑主题色 END **/

/** 暗黑+主题色 START **/
.dark-plus-theme {
  @include theme(#1e1f22, #bb9667, #a1a84e, #c77dbb, #6aab73, #28aab4, #ce8951, #c78d61);
}
/** 暗黑+主题色 END **/
.dark-theme,
.dark-plus-theme {
  .json-viewer ul {
    border-left: 0.5px dotted #5e5e5e;
  }

  .json-colon,
  .json-comma {
    color: #ccc;
  }

  .json-arrow {
    color: #fff;
    opacity: 0.35;

    &:hover {
      opacity: 0.5;
    }
  }
}
/** 表格样式 START **/
.json-tree-table {
  border-collapse: collapse;
  width: -webkit-fill-available;
}

.json-tree-table tr.selected * {
  color: #fff !important;
  background-color: #3875d7;
}

.json-tree-table tr:hover {
  background-color: #f0f9fe;
}

.json-tree-table tr td:first-child {
  width: 120px;
}

.dark-theme .json-tree-table tr:hover,
.dark-plus-theme .json-tree-table tr:hover {
  background-color: #353b48;
}
/** 表格样式 END **/
